<template>
  <div>
    <ul v-if="show">
      <SongItem v-for="item in songList" :key="item.id" :item="item" />
    </ul>
    <Loading v-else />
  </div>
</template>

<script>
import SongItem from "@/components/SongItem.vue";
import Loading from "@/components/Loading.vue";
export default {
  components: {
    SongItem,
    Loading
  },
  data() {
    return {
      songList: [],
      show:false,
    };
  },
  created() {
    this.show = false,
    this.axios
      .get("https://apis.netstart.cn/music/personalized?limit=6")
      .then((res) => {
        this.songList = res.data.result;
        window.setTimeout(()=>{
            this.show = true;
        },1000)
      });
  },
};
</script>

<style lang="less" scoped>
ul {
    display: flex;
    flex-wrap: wrap;
  li {
    width: 30vw;
    
    flex-grow: 1;

    &:nth-of-type(3n + 2) {
      margin: 0 3px;
    }
  }
}
</style>